import React,{ Component } from "react";
import "./critic.css"
class DemoComment extends Component{
    state={
        title:'',
        content:'',
        list:[
            {
                title: 'jack',
                content: ' 沙发！！！'
            }
        ]
    }

    updateTitle = (e) => {
        // 从事件对象event中拿到input的值来更新state
        let title = e.target.value
        // 更新state-> setState方法
        this.setState({
            title
        })

    }
    updateContent = (e) => {
        // 从事件对象event中拿到input的值来更新state
        this.setState({
            content: e.target.value
        })
    }

    publish=()=>{
        const {title,content}=this.state
        // 第一种方法
        // let newArr=[...this.state.list]
        // newArr.push({title,content})
        // 第二种方法
        let newArr=this.state.list.concat([{title,content}])
        this.setState({
            list:newArr
        })
    }

    del=(index)=>{
        this.state.list.splice(index,1)
        this.setState({
            list:this.state.list
        })
    }

    render(){
        return(<>
        <div className="box">
        <h2>案例-发表评论</h2>
        </div>
        <div className="boxA">
            <div className="center">
            <div className="inputA">
                <input type="text" value={this.state.title} className="inputhd" placeholder='请输入评论人' onChange={this.updateTitle} />
            </div>
            <div className="inputB">
                <textarea  cols="40" value={this.state.content} rows="10" placeholder='请输入评论内容' onChange={this.updateContent}></textarea>
            </div>
            <button onClick={this.publish}>发表评论</button>
            </div>
           <div className="list">
                <ul>
                    {
                        this.state.list.map((item,index)=><li key={index}>
                            <div className="left">
                            <h2>评论人：{item.title}</h2>
                            <h5>评论内容:{item.content}</h5>
                            
                            </div>
                            <div className="right">
                              <button onClick={()=>this.del(index)}>删除</button>
                            </div>
                    </li>)
                    }
                </ul>
           </div>
        </div>
        </>)
    }
}

export default DemoComment